<!DOCTYPE html>
<html lang="en">
<head>
<!--    zpl-->
    <meta charset="UTF-8">
    <title>成员管理</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <el-container>
        <el-header>
            <el-form :inline="true"  class="demo-form-inline" style="display: flex;align-items: center">
                <el-form-item label="职位" style="margin-left: 10px">
                    <el-input v-model="position"  placeholder="请输入职位"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="department" filterable placeholder="请选择">
                        <el-option
                                v-for="item in optionsDepartment"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click.prevent="query(1)">查询</el-button>
                    <el-button  type="primary" @click.prevent="create">添加</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="position" label="职位"></el-table-column>
                <el-table-column prop="department" label="部门"></el-table-column>
                <el-table-column prop="entrytime" label="入职时间"></el-table-column>
                <el-table-column prop="salary" label="薪资"></el-table-column>
                <el-table-column prop="telphone" label="电话号码"></el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="modify(scope.row)" type="text" size="small">编辑</el-button>
                        <el-popconfirm title="请问是否经逻辑删除, 否则使用物理删除?"
                                       confirm-button-text='逻辑删除'
                                       cancel-button-text='物理删除'
                                       icon="el-icon-info"
                                       icon-color="red"
                                       @confirm="remove(scope.row,'逻辑删除')"
                                       @cancel="remove(scope.row,'物理删除')">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination :current-page="currentPage":page-size="pageSize" @click.prevent="query" @size-change="sizeChange"
                           style="text-align: center"
                           background :page-sizes="[5, 10, 20]"
                           layout="sizes, prev, pager, next"
                           :total="tableData.total">
            </el-pagination>
        </el-footer>
    </el-container>
    <el-dialog title="员工编辑" :visible.sync="dialogVisible" width="30%">
        <div style="display: flex; justify-content: space-around">
            <el-form>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="editEmp.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="editEmp.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" :label-width="formLabelWidth">
                    <el-input v-model="editEmp.entryTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪资" :label-width="formLabelWidth">
                    <el-input v-model="editEmp.salary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="editEmp.department" filterable placeholder="请选择">
                        <el-option
                                v-for="item in optionsDepartment"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话号码" :label-width="formLabelWidth">
                    <el-input v-model="editEmp.telphone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveMenber">确 定</el-button>
  </span>
    </el-dialog>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            position : "",
            department : "",
            optionsDepartment : [
                {value : "生产部", label : "生产部"},
                {value : "技术部", label : "技术部"},
                {value : "营销部", label : "营销部"},
                {value : "监管部", label : "监管部"},
                {value : "董事部", label : "董事部"},

            ],
            currentPage : 1,
            pageSize: 5,
            tableData: [],
            dialogVisible : false,
            editEmp : {name: "", position: "", entryTime: (new Date()).toLocaleDateString().replaceAll(/\//g,"-"), salary: 0, department: "", telphone : ""},
            formLabelWidth : "100px"

        },
        created(){
          this.query(1);
        },
        methods:{
            sizeChange(size) {
                this.pageSize = size;
                this.query(1);
            },
            query(page) {
                axios.get("../employee").then(res=>{
                    console.log(res.data);
                    this.tableData = res.data;
                    console.log(this.tableData)
                })
            },
            create(){

            },
            saveMenber(){

            },
            modify(menber){

            },
            remove(menber, flag){

            }
        }
    })
</script>
</body>
<style>
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container{
        height: 100%;
    }
    .el-main {
        height: 100%;
    }
</style>
</html>